<template>
  <div class="flex justify-center py-16">
    <div class="flex flex-col space-y-4 rounded-lg bg-white p-8 bg-opacity-60 backdrop-blur-md">
      <h4 class="text-center text-2xl tracking-widest">注册新用户</h4>
      <form @submit.prevent="handleSubmit(!v$.$invalid)" class="flex flex-col space-y-4">
        <div>
          <div class="p-inputgroup">
            <span class="p-inputgroup-addon">
              <i class="far fa-user"></i>
            </span>
            <InputText
              id="name"
              v-model="v$.name.$model"
              placeholder="用户名"
              :class="{ 'p-invalid': v$.name.$invalid && submitted }"
            />
          </div>
          <small v-if="(v$.name.$invalid && submitted) || v$.name.$pending" class="p-error">用户名不能为空</small>
        </div>
        <div>
          <div class="p-inputgroup">
            <span class="p-inputgroup-addon">
              <i class="far fa-envelope"></i>
            </span>
            <InputText
              id="email"
              v-model="v$.email.$model"
              placeholder="邮箱"
              :class="{ 'p-invalid': v$.email.$invalid && submitted }"
            />
          </div>
          <span v-if="v$.email.$error && submitted">
            <small class="p-error">请输入正确的邮箱</small>
          </span>
          <small
            v-else-if="(v$.email.$invalid && submitted) || v$.email.$pending"
            class="p-error"
          >邮箱不能为空</small>
        </div>
        <div>
          <div class="p-inputgroup">
            <span class="p-inputgroup-addon">
              <i class="far fa-lock"></i>
            </span>
            <Password
              id="password"
              ref="password"
              v-model="v$.password.$model"
              placeholder="密码"
              :class="{ 'p-invalid': v$.password.$invalid && submitted }"
            >
              <template #footer>
                <Divider />
                <p class="mt-2">密码建议</p>
                <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
                  <li>至少有一个小写字母</li>
                  <li>至少有一个大写字母</li>
                  <li>至少有一个数字</li>
                  <li>至少有8位密码</li>
                </ul>
              </template>
            </Password>
          </div>
          <small
            v-if="(v$.password.$invalid && submitted) || v$.password.$pending"
            class="p-error"
          >密码不能为空</small>
        </div>
        <div class="flex space-x-2 items-center">
          <Checkbox
            id="accept"
            name="accept"
            value="Accept"
            v-model="v$.accept.$model"
            :class="{ 'p-invalid': v$.accept.$invalid && submitted }"
          />
          <label for="accept" :class="{ 'p-error': v$.accept.$invalid && submitted }">我同意《时尚轻纺用户协议》</label>
        </div>
        <Button type="submit" label="注 册" class="p-mt-2" />
      </form>
    </div>
  </div>
  <Verify mode="pop" captchaType="blockPuzzle" ref="verify" @success="success" />
</template>

<script lang="ts">
export default defineComponent({
  name: 'Register',
})
</script>

<script lang="ts" setup>
import { defineComponent, reactive, ref } from 'vue'
import { email, required, sameAs, and, not } from '@vuelidate/validators'
import { useVuelidate } from '@vuelidate/core'
import { register } from '@/api/auth/token'
import { useToast } from 'primevue/usetoast'

import Verify from '@/components/verifition/Verify.vue'
import Password from 'primevue/password/Password.vue'
import InputText from 'primevue/inputtext/InputText.vue'
import Button from 'primevue/button'
import Checkbox from 'primevue/checkbox/Checkbox.vue'
import Divider from 'primevue/divider'

let toast = useToast()

const state = reactive({
  name: '',
  email: '',
  password: '',
  comfirmPassword: '',
  accept: null,
})

let notNull = not(sameAs(false))

const rules = {
  name: { required },
  email: { required, email },
  password: { required },
  accept: { required, shouldBeChecked: and(notNull) },
}

const v$ = useVuelidate(rules, state)

const submitted = ref(false)

const verify = ref()
const handleSubmit = (isFormValid: boolean) => {
  submitted.value = true;

  if (!isFormValid) {
    return;
  }
  verify.value.show()
}

function success(verifition: string) {
  register(state.name, state.email, state.password, verifition)
    .then(() => {
      toast.add({ severity: 'success', summary: '注册成功', detail: '即将跳转到登录页...', life: 3000 })
      setTimeout(() => {
        window.location.href = '/login'
      }, 1000)
    })
    .catch((err) => {
      toast.add({ severity: 'error', summary: '注册失败', detail: err.data.msg, life: 3000 })
    })
}
</script>